<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Virtual List Example</title>
    <style>
        .hidden-container {
            position: absolute;
            visibility: hidden;
            width: 100px;
            /* Adjust to your needs */
        }

        .list {
            height: 100vh;
            overflow-y: scroll;
            display: flex;
            flex-direction: column;
        }

        .item {
            border: 1px solid #ccc;
            margin-bottom: 1px;
        }
    </style>
</head>

<body>
    <div class="hidden-container" id="hiddenContainer"></div>
    <div class="list" id="list"></div>

    <script>
        const list = document.getElementById('list');
        const hiddenContainer = document.getElementById('hiddenContainer');
        const items = [
            { text: 'Item 1', height: null },
            { text: 'Item 2', height: null },
            // Add more items...
        ];

        // Measure heights and calculate offsets
        items.forEach((item, index) => {
            const element = document.createElement('div');
            element.className = 'item';
            element.textContent = item.text;
            hiddenContainer.appendChild(element);
            item.height = element.offsetHeight;
            if (index > 0) {
                items[index].offset = items[index - 1].offset + items[index - 1].height;
            } else {
                items[0].offset = 0;
            }
        });

        // Render visible elements
        let scrollTop = 0;
        function renderVisibleElements() {
            const visibleItems = [];
            for (let i = 0; i < items.length; i++) {
                if (items[i].offset >= scrollTop && items[i].offset < scrollTop + window.innerHeight) {
                    visibleItems.push(items[i]);
                }
            }

            list.innerHTML = ''; // Clear the list
            visibleItems.forEach(item => {
                const element = document.createElement('div');
                element.className = 'item';
                element.textContent = item.text;
                list.appendChild(element);
            });
        }

        list.addEventListener('scroll', () => {
            scrollTop = list.scrollTop;
            requestAnimationFrame(renderVisibleElements);
        });

        renderVisibleElements(); // Initial render
    </script>
</body>

</html>